<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <!-- 顶部 -->
        <el-row type="flex">
          <el-col>
            <el-button type="primary" size="small" @click="showDialog(-1)"> 添加经纪 </el-button>
          </el-col>
          <el-col>
            <div style="margin-top: 15px">
              <el-input
                v-model="agentQuest.name_contains"
                placeholder="请输入关键字"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchFn"
                />
              </el-input>
            </div>
          </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table :data="agentList" border style="width: 100%">
          <el-table-column label="图片" width="200">
            <template #default="{ row }">
              <img :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column label="名称" width="160" prop="name" />
          <el-table-column label="邮箱" width="180" prop="email" />
          <el-table-column label="电话" width="180" prop="phone" />
          <el-table-column label="地址" width="180" prop="address" />
          <el-table-column label="介绍" prop="desc" />
          <el-table-column label="操作" width="160">
            <template #default="{row}">
              <el-row type="flex" justify="center">
                <el-button type="primary" size="small" @click="showDialog(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="agentQuest._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>
      <AddManager :is-show-dialog.sync="isShowDialog" :manager-id="managerId" @update="update" />
    </div>
  </div>
</template>

<script>
import { getAgents, getAgentsCount, delAgent } from '@/api/agent'
import AddManager from './component/add-manage.vue'
export default {
  components: { AddManager },
  data() {
    return {
      managerId: -1, //
      isShowDialog: false, // 控制弹框
      total: 0, // 总数
      currentPage: 1, // 当前页码
      agentList: [], // 经纪数组
      agentQuest: {
        _limit: 2,
        _start: 0,
        name_contains: ''
      }
    }
  },
  created() {
    this.getAgents()
    this.getAgentsCount()
  },
  methods: {
    // 删除
    async delFn(id) {
      // 二次确认
      await this.$confirm('删除成功')
      // 删除接口
      await delAgent(id)
      if (this.agentList.length === 1 && this.currentPage > 1) {
        this.agentQuest._start -= this.agentQuest._limit
        this.currentPage--
      }
      console.log(95, this.total)
      // 提示用户
      this.$message.success('删除成功')

      await this.getAgents({
        ...this.agentQuest,
        _limit: this.agentQuest._limit,
        _start: this.agentQuest._start
      })
      await this.getAgentsCount()
    },

    // 子组件通知父组件
    update() {
      this.getAgents()
      this.getAgentsCount()
      this.managerId = -1
      this.isShowDialog = false
    },

    // 控制弹框
    showDialog(id) {
      this.isShowDialog = true
      this.managerId = Number(id)
    },

    // 页码更换
    handleCurrentChange(currentPage) {
      this.agentQuest._start = (currentPage - 1) * this.agentQuest._limit
      this.currentPage = currentPage
      this.getAgents()
      console.log('页码', this.agentQuest._start)
    },

    // 分页条数函数
    handleSizeChange(pageSize) {
      this.agentQuest._limit = pageSize
      this.agentQuest._start = (this.currentPage - 1) * this.agentQuest._limit
      // this.getAgents({
      //   _limit: this.agentQuest._limit,
      //   _start: this.agentQuest._start
      // })
      this.getAgents()
      console.log('分页条数', this.agentQuest._start)
    },

    // 获取经纪总数
    async getAgentsCount(params) {
      const { data } = await getAgentsCount(params)
      this.total = data
      console.log(93, this.total)
    },

    // 搜索框函数
    async searchFn() {
      await this.getAgents({
        ...this.agentQuest,
        name_contains: this.agentQuest.name_contains
      })
      await this.getAgentsCount({
        name_contains: this.agentQuest.name_contains || ''
      })
    },

    // 获取经理列表
    async getAgents() {
      const { data } = await getAgents(
        { ...this.agentQuest, name_contains: this.agentQuest.name_contains || '' }
      )
      this.agentList = data
      console.log(68, this.agentList)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .el-table {
      margin-top: 20px;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    ::v-deep .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  }
}
img {
  height: 190px;
  width: 190px;
   object-fit: contain;
}
</style>
